import React,{Component} from 'react';
import './companyclassify.scss';
import { getShopGoodsCatalogs } from 'api/company.js';
import {
  Link
} from 'react-router-dom';
export default class Companyclassify extends Component{
	constructor (props) {
		super(props)
		this.state={
			shop_id:props.location.state.shop_id,
			classifyList: [],
			hide: 'card_hide',
			keywords: ''
		}
	}
	down = () => {
		this.setState({
			hide:this.state.hide === 'card_hide' ? '' : 'card_hide'
		})
	}
	_getShopGoodsCatalogs (num) { //店铺商品分类接口
		getShopGoodsCatalogs({
			shop_id : num
		}).then(res => {
			if(res.code === 1){
				this.setState({
					classifyList: res.data
				})
			}
		})
	}
	enterInto () { //回车进行搜索
    this.props.history.push({
      pathname:'/company/classifyList',
			state:{
				shop_id: this.props.location.state.shop_id,
				keywords: this.state.keywords
			}
    })
    return false;
  }
	handleChange = (e) => { //表单改变值发生变化
    this.setState({
    	keywords: e.target.value
    })
  }
	componentDidMount () {
		this._getShopGoodsCatalogs(this.props.location.state.shop_id);
		// this._getShopGoodsCatalogs(1);
	}
	render(){
		return(
			<div className="companyclassify">
				<div className="companyclassify_title">
					<div><Link to={
						{
							pathname:'/company',
							state:{shop_id:this.props.location.state.shop_id}
						}
					}><span className="glyphicon glyphicon-back"></span></Link></div>
					<div>
						<form onSubmit={this.enterInto.bind(this)} action="#" className="searchInto">
						  <input type="text" placeholder="请输入公司关键词" onChange={this.handleChange} value={this.state.keywords}/>
						</form>
						<Link to={
							{
								pathname:'/company/classifyList',
								state:{
									shop_id: this.props.location.state.shop_id,
									keywords: this.state.keywords
								}
							}
						}><span className="glyphicon glyphicon-search am"></span>
						</Link>
					</div>
					<div className="glyphicon glyphicon-classify2" onClick={this.down}></div>
				</div>
				<div className={`com_cla ${this.state.hide}`}>
					<ul>
						<Link to={
							{
								pathname: '/company',
								state: {
									shop_id:this.props.location.state.shop_id,
									list: 0
								}
							}
						}><li><i className="glyphicon glyphicon-shop1"></i>店铺首页</li></Link>
						<Link to={
							{
								pathname: '/company',
								state: {
									shop_id:this.props.location.state.shop_id,
									list: 1
								}
							}
						}><li><i className="glyphicon glyphicon-pro" style={{fontSiza:'30px'}}></i>供应商品</li></Link>
						<Link to={
							{
								pathname: '/company',
								state: {
									shop_id:this.props.location.state.shop_id,
									list: 2
								}
							}
						}><li><i className="glyphicon glyphicon-file"></i>公司档案</li></Link>
						<Link to={
							{
								pathname: '/company',
								state: {
									shop_id:this.props.location.state.shop_id,
									list: 3
								}
							}
						}><li><i className="glyphicon glyphicon-tel"></i>联系我们</li></Link>
					</ul>
					<div className="black"></div>
				</div>
				<div className="classify_cont">
					<div className="class_list">
            <Link to={
							{
								pathname:'/company/classifyList',
								state:{
									shop_id: this.props.location.state.shop_id,
									name: '全部商品'
								}
							}
						}>
							<p>
	          		全部商品<i className="glyphicon glyphicon-right user_right"></i>
	            </p>
            </Link>
					</div>
					<div className="class_list">
						{
							this.state.classifyList.map((item,index) => {
								return(
								<div key={index}>
								{
									item.sub.length === 0 ?
									<Link to={
										{
											pathname:'/company/classifyList',
											state:{
												shop_id: this.props.location.state.shop_id,
												cat_id: item.cat_id,
												name: item.name
											}
										}
									}><div className="com_list" key={index}>
										{item.name}
										<i className="glyphicon glyphicon-right user_right"></i>
									</div></Link>
									:
									<div className="com_list" key={index}>
										{item.name}
										<i className="glyphicon glyphicon-down user_right"></i>
										<ul>
										{
											item.sub.map((value,i) => {
												return(
													<Link to={
														{
															pathname:'/company/classifyList',
															state:{
																shop_id: this.props.location.state.shop_id,
																cat_id: value.cat_id,
																name: value.name
															}
														}
													} key={i}><li >{value.name}</li></Link>
												)
											})
										}
										</ul>
									</div>
								}
								</div>
								)
							})
						}
					</div>
				</div>
			</div>
		)
	}
}
